<template>
  <div>
    <h3>热搜榜</h3>
    <div class="song-list">
      <div class="list-item" v-for="(item, index) in hotList" :key="index" @click="goDetail(item.searchWord)">
        <!-- item.searchWord 传递的参数是标题， -->
        <div class="left-item">{{index + 1}}</div>
        <div class="right-item">
          <p class="name">{{item.searchWord}} {{item.score}}</p>
          <p class="name ar ell">
            <span class="ell" >{{item.content}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hotList',
  data () {
    return {
      hotList: []
    }
  },
  methods: {
    goDetail (val) {
      this.$router.push({ name: 'site', params: { val } })
    },
    getHotlist () {
      this.$axios.get('/api/search/hot/detail').then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.hotList = res.data.data
        }
      })
    }
  },
  mounted () {
    this.getHotlist()
  }
}
</script>
<style lang="stylus" scoped>
.song-list
  padding 0 .3rem
  .list-item
    height 1.2rem
    width 100%
    display flex
    .left-item
      width .5rem
      line-height 1.2rem
    .right-item
      flex 1
      overflow hidden
      .name
        line-height 2
</style>
